<template>
	<view class="container">
		<view class="example">
			<view class="content">
				<image src="/static/images/yaoqing.jpg" mode="widthFix" class="background-image"></image>

				<view class="box">
					<view class="title">邀请好友</view>
					<view class="desc">分享链接邀请更方便</view>

					<view class="notice-btn" @click="showNotice">
						<text>邀</text>
						<text>请</text>
						<text>须</text>
						<text>知</text>
					</view>
					<view class="invite-code-box">
						<text>我的邀请码: <text style="font-size: 20px;margin-left: 10px"> {{ qrcode }}</text></text>
						<text class="copy-btn" @click="copyCode">复制</text>
					</view>
				</view>
			</view>

			<view class="painter" style="padding: 40rpx;margin-top: 100rpx;">
				<l-painter ref='painter' isCanvasToTempFilePath
					css="width: 670rpx;background-color: #fff;border-radius: 40rpx;padding: 40rpx;">
					<l-painter-view css="display:flex;justify-content: center;">
					<l-painter-image src="/static/images/card_img.png" alt=""
						css="width: 70%;margin-bottom: 20rpx;"></l-painter-image>
						</l-painter-view>
					<l-painter-view css="display:flex; justify-content: space-between;">
						<l-painter-view css="display:flex;">
							<l-painter-view
								css="display: flex;	flex-direction: column;align-items: center;margin-left: -20rpx;border-radius: 40rpx;">
								<l-painter-image :src="qrcodePath"
									css="width: 200rpx;height: 200rpx;background: #fff;border-radius: 40rpx;"></l-painter-image>
								<!--            <text class="qrcode-tip">邀请好友扫描二维码注册</text>-->
							</l-painter-view>
							<l-painter-view css="margin-top: 30rpx;">
								<l-painter-text css="font-size: 32rpx;font-weight: 600;margin-bottom: 20rpx;">
									邀请码：{{ qrcode }}
								</l-painter-text>
								<l-painter-view>
									<l-painter-text>
										注册记得填写邀请码
									</l-painter-text>
								</l-painter-view>
							</l-painter-view>
						</l-painter-view>
						<l-painter-view css="margin-top: 30rpx;">
							<l-painter-image css="width: 120rpx;height: 120rpx;"
								:src="globalConfig.appInfo.logo"></l-painter-image>
						</l-painter-view>
					</l-painter-view>
				</l-painter>
			</view>

			<view class="button-group">
				<button class="invite-btn" @click="share">立即邀请</button>
				<button class="record-btn" @click="showRecord">邀请记录</button>
			</view>
		</view>

		<!-- 分享面板 -->
		<uni-popup ref="popup" type="bottom" :mask-click="true">
			<view class="share-panel">
				<view class="share-title">分享</view>
				<view class="share-options">
					<view class="share-item" @click="shareTo(0)">
						<image src="/static/images/poster.png" mode="aspectFit"></image>
						<text>生成海报</text>
					</view>
					<view class="share-item" @click="shareTo(1)">
						<image src="/static/images/link.png" mode="aspectFit"></image>
						<text>复制链接</text>
					</view>
				</view>
				<button class="cancel-btn" @click="closeShare">取消</button>
			</view>
		</uni-popup>

		<!-- 海报图片弹窗 -->
		<uni-popup ref="posterPopup" type="center" :mask-click="true">
			<view class="poster-popup-content">
				<image
					v-if="posterImgUrl"
					:src="posterImgUrl"
					mode="widthFix"
					class="poster-popup-img"
					@longpress.stop
				></image>
				<button class="poster-popup-download" @click="downloadPoster" v-if="posterImgUrl">下载海报</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
	import wechat from '@/utils/wechat.js';
	export default {
		components: {
			UniPopup
		},
		data() {
			return {
				showShare: false,
				qrcode: this.$store.state.user.qrcode,
				qrcodePath: this.$store.state.user.qrcodePath,
				globalConfig: getApp().globalData.config,
				posterImgUrl: '', // 新增：海报图片地址
			}
		},
		methods: {
			copyCode() {
				uni.setClipboardData({
					data: this.qrcode,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			share() {
				this.$refs.popup.open('bottom')
				this.showShare = true
			},
			closeShare() {
				this.$refs.popup.close('')
				this.showShare = false
			},
			// 新增：关闭海报弹窗
			closePosterPopup() {
				this.$refs.posterPopup.close()
				this.posterImgUrl = ''
			},
			// 新增：下载海报
			downloadPoster() {
				if (!this.posterImgUrl) return;
				// #ifdef H5
				// 创建一个a标签下载图片
				const link = document.createElement('a');
				link.href = this.posterImgUrl;
				link.download = 'poster.jpg';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				// #endif
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImgUrl,
					success: () => {
						uni.showToast({
							title: '已保存到相册',
							icon: 'none'
						});
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				});
				// #endif
			},
			shareTo(type) {
				switch (type) {
					case 0:
						this.$refs.painter.canvasToTempFilePathSync({
							fileType: "jpg",
							pathType: 'url',
							quality: 1,
							success: (res) => {
								// #ifdef H5
								this.posterImgUrl = res.tempFilePath
								this.$refs.posterPopup.open('center')
								uni.showToast({
									title: '海报已生成，请长按保存',
									icon: 'none'
								});
								// #endif
								// #ifndef H5
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										console.log('save success');
									}
								});
								//#endif
							},
							fail: (err) => {
								// #ifdef H5
								uni.showToast({
									title: '生成海报失败，请重试或更换浏览器',
									icon: 'none'
								});
								// #endif
								// #ifndef H5
								uni.showToast({
									title: '生成海报失败',
									icon: 'none'
								});
								// #endif
							}
						});
						break
					case 1:
						uni.setClipboardData({
							data: '和我一起来【趣看看】抢趣能卡，每天收获晶核(http://qukk.gl25.cn?qrcode=' + this.qrcode +')',
							success: () => {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						})
						break;
					default:
						break;
				}
				this.closeShare()
			},
			showRecord() {
				// 显示邀请记录逻辑
				this.$tab.navigateTo('/pages/mine/info/record')
			},
			showNotice() {
				// 显示邀请须知逻辑
				this.$tab.navigateTo('/pages/mine/info/notice')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	::v-deep .uni-popup {
		z-index: 9999;
	}

	.notice-btn {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		writing-mode: vertical-rl;
		letter-spacing: 10rpx;
		color: #fff;
		background: rgb(252, 163, 2);
		padding: 10rpx;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		z-index: 2;
	}

	.button-group {
		// position: fixed;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;

		.invite-btn {
			background: #000;
			color: #fff;
			width: 600rpx;
			border-radius: 50px;
			border: 1px solid #fff;

		}

		.record-btn {
			margin-top: 15px;
			border-radius: 50px;
			background: transparent;
			color: #000;
			width: 600rpx;
			border: none !important;

			&:after {
				display: none;
			}
		}
	}

	.example {
		position: relative;
		padding: 0;



		.content {
			position: relative;
			z-index: 1;

			.box {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 30rpx;
			}

			.background-image {
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 0;

				img {
					height: 100%;
				}
			}

			.title {
				color: #000;
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 25px;
				text-align: center;
			}

			.desc {
				font-size: 14px;
				color: #000;
				margin-bottom: 10px;
				text-align: center;
			}

			.invite-code-box {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 15px;
				color: #fff;
				position: absolute;
				bottom: -25px;
				width: 600rpx;
				left: 50%;
				transform: translateX(-50%);
				background: rgba(0, 0, 0, 1);
				border-radius: 10px;

				.copy-btn {
					margin-left: 10px;
					color: #fff;
				}
			}


		}

		/* 新增二维码样式 */
		.qrcode-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: -20rpx;
			border-radius: 40rpx;

			.qrcode-image {
				width: 200rpx;
				height: 200rpx;
				background: #fff;
				border-radius: 40rpx;
			}

			.qrcode-tip {
				font-size: 12px;
				color: #000;
			}
		}
	}

	.share-panel {
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 30rpx;

		.share-title {
			text-align: center;
			font-size: 16px;
			color: #333;
			margin-bottom: 30rpx;
		}

		.share-options {
			display: flex;
			justify-content: space-around;
			margin-bottom: 30rpx;

			.share-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 12px;
					color: #666;
				}
			}
		}

		.cancel-btn {
			width: 100%;
			background: #f5f5f5;
			color: #333;
			border-radius: 8rpx;
		}
	}

	.share_poster {
		margin: 40rpx;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 20rpx 20rpx 0 20rpx;
		margin-top: 100rpx;
	}

	.poster_img {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.poster_center {
		margin-top: 30rpx;
	}

	.poster_center_t1 {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.poster_center_right {
		display: flex;
		align-items: flex-end;
		margin-bottom: 20rpx;
	}

	.painter {
		width: 100%;
	}

	// 新增：海报弹窗样式
	.poster-popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 20rpx 20rpx 20rpx;
		background: #fff;
		border-radius: 24rpx;
		max-width: 90vw;
	}

	.poster-popup-img {
		width: 500rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
	}

	.poster-popup-tip {
		font-size: 14px;
		color: #888;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.poster-popup-download {
		width: 200rpx;
		background: #000;
		color: #fff;
		border-radius: 40rpx;
		font-size: 16px;
		margin-bottom: 16rpx;
	}

	.poster-popup-close {
		width: 200rpx;
		background: #f5f5f5;
		color: #333;
		border-radius: 8rpx;
		font-size: 16px;
	}
</style>